<template>
	<view class="shopping">
		<view class="header">
			<view class="search">
				<image src="@/static/images/1.png"></image>
				<input type="text" placeholder="输入关键词搜索" v-model="name">
				<view class="btn" @click="submit">{{$t('market.搜索')}}</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="content">
				<uv-swiper :list="swiper" keyName="img" height="150" imgMode="scaleToFill"></uv-swiper>
				<view class="title">{{$t('shopping.热卖专区')}}</view>
				<view class="list">
					<uv-waterfall ref="waterfall" v-model="_this.list" :add-time="10" :column-gap="10"
						@changeList="changeList">
						<template v-slot:list1>
							<view>
								<view class="item" v-for="item in data_list.list1"
									@click="router(`/pages/shopping/deta?id=${item.id}`)">
									<view class="cover">
										<image :src="item.cover" mode="widthFix"></image>
									</view>
									<view class="name">【{{item.name}}】</view>
									<view class="price">
										<view class="unit">$</view>
										<view class="value">{{item.price}}</view>
									</view>
								</view>
							</view>
						</template>
						<template v-slot:list2>
							<view>
								<view class="item" v-for="item in data_list.list2"
									@click="router(`/pages/shopping/deta?id=${item.id}`)">
									<view class="cover">
										<image :src="item.cover" mode="widthFix"></image>
									</view>
									<view class="name">【{{item.name}}】</view>
									<view class="price">
										<view class="unit">$</view>
										<view class="value">{{item.price}}</view>
									</view>
								</view>
							</view>
						</template>
					</uv-waterfall>
					<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		shopProductLists
	} from "@/request/api";
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	const swiper = ref([]);
	const name = ref("");
	const getList = async () => {
		let {
			rotation,
			list
		} = await shopProductLists({
			name: name.value,
			page: _this.page,
			limit: _this.limit,
		});
		swiper.value = rotation;
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	const data_list = reactive({
		list1: [],
		list2: []
	});
	const waterfall = shallowRef();
	const changeList = (e) => data_list[e.name].push(e.value);

	const submit = () => {
		_this.page = 1;
		_this.list = [];
		getList();
	};

	onShow(() => getList());
	onHide(() => {
		_this.page = 1;
		_this.list = [];
		waterfall.value.clear();
		data_list.list1 = [];
		data_list.list2 = [];
	});
</script>

<style scoped lang="scss">
	.shopping {
		.header {
			height: $navBarHeight;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.search {
				width: 100%;
				height: 33px;
				border-radius: 16px;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #2F2F2F;
				display: flex;
				align-items: center;

				image {
					width: 18px;
					height: 18px;
				}

				input {
					flex: 1;
					color: #808080;
					font-size: 12px;
					padding-left: 10rpx;
					box-sizing: border-box;
				}

				.btn {
					color: #DDF247;
					font-size: 12px;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - var(--window-top) - var(--window-bottom));
			padding-top: 30rpx;
			box-sizing: border-box;

			.content {
				padding: 0 20rpx;
				box-sizing: border-box;

				.title {
					width: 274rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #202020;
					font-size: 32rpx;
					font-weight: bold;
					font-family: Alimama ShuHeiTi;
					margin: 30rpx auto;
					background: url(@/static/images/8.png) no-repeat;
					background-size: 100% 100%;
				}

				.list {
					padding: 0 10rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 335rpx;
						border-radius: 12rpx;
						margin-bottom: 20rpx;
						padding: 30rpx;
						box-sizing: border-box;
						background: #2F2F2F;
						overflow: hidden;

						.cover {
							width: 100%;
							// height: 316rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100%;
							}
						}

						.name {
							color: #FFFFFF;
							font-size: 28rpx;
							font-weight: 800;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							padding: 20rpx 0;
							box-sizing: border-box;
						}

						.price {

							display: flex;
							align-items: flex-end;

							.unit {
								color: #DDF247;
								font-size: 20rpx;
								font-weight: bold;
							}

							.value {
								color: #DDF247;
								font-size: 26rpx;
								font-family: DINPro;
								padding-left: 8rpx;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}
	}
</style>